<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
<style>

.etcd-nodes .icon {
  width: 3%;
}

.etcd-nodes .key {
  width: 25%;
}

.etcd-nodes .value {
  width: 25%;
}

.etcd-nodes .value-wrapper {
  display: block;
  display: -webkit-box;
  width: 100%;
  height: 1.4em;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.etcd-nodes .created, .etcd-nodes .modified, .etcd-nodes .ttl {
  width: 10%;
}

.etcd-nodes .expiration {
  width: 200px;
}

.breadcrumb li:first-child span.fa.breadcrumb-icon:before {
  content: "\f015"; /* fa-home */
}
.apiv3 .breadcrumb>li+li:before {
  padding: 0 2px;
  color: #ccc;
  content: "\00a0";
}

td.table-cell-link > a {
  display: block;
  width: 100%;
  height: 100%;
}

.breadcrumb.node-breadcrumb {
  margin-right: 125px; /* leave enough space for the actions */
}

.btn-group.node-actions {
  position: absolute;
  right: 15px;
  top: 0;
}

a.edit-value, a.edit-value:hover, a.edit-value:focus {
  text-decoration: none;
  color: #333;
}


tr.active span.fa.node-icon:before {
  content: "\f015"; /* fa-home */
}

tr.dir-true span.fa.node-icon:before {
  content: "\f114"; /* fa-folder-o */
}

tr.dir-false span.fa.node-icon:before {
  content: "\f0f6"; /* fa-file-text-o */
}

tr.dir-true.active span.fa.node-icon:before {
  content: "\f07c"; /* fa-folder-open */
}

tr.dir-false.active span.fa.node-icon:before {
  content: "\f15c"; /* fa-file-text */
}


</style>
</wicket:head>

</head>
<body>

<wicket:panel>


<div class="row hidden">
  <div class="col-sm-6 col-md-8">
    <h4><span wicket:id="icon"></span> <span wicket:id="key"></span></h4>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="well well-sm">
      <dl class="dl-horizontal">
        <dt>Created</dt>    <dd><span wicket_id="createdIndex"></span></dd>
        <dt>Modified</dt>   <dd><span wicket_id="modifiedIndex"></span></dd>
        <dt>TTL</dt>        <dd><span wicket_id="ttl"></span></dd>
        <dt>Expiration</dt> <dd><span wicket_id="expiration"></span></dd>
      </dl>
    </div>
  </div>
</div>



<div wicket:id="breadcrumbAndActions" class="row">
  <div class="col-xs-12">

    <ol class="breadcrumb node-breadcrumb">
      <li wicket:id="breadcrumb"><a href="#" wicket:id="key"><span class="fa breadcrumb-icon"></span><span wicket:id="label"></span></a></li>
    </ol>

    <div class="btn-group node-actions" role="group" aria-label="...">
      <a wicket:id="addNode" href="#" class="btn btn-default tooltip-trigger" title="Add another key-value or directory"><span class="fa fa-plus"></span></a>
      <a wicket:id="editNode" href="#" class="btn btn-default tooltip-trigger" title="Edit current node"><span class="fa fa-pencil"></span></a>
      <a wicket:id="deleteNode" href="#" class="btn btn-default tooltip-trigger" title="Delete current node"><span class="fa fa-trash"></span></a>
    </div>

  </div><!-- ./col-xs-12 -->
</div><!-- ./row -->

<div wicket:id="contents">

<div class="panel panel-default">

  <wicket:enclosure child="nodes">
    <table class="table etcd-nodes table-hover">
      <thead>
        <tr>
          <th class="icon"></th>
          <th class="key">Key</th>
          <th class="value">Value</th>
          <th class="created hidden-sm hidden-xs">Created</th>
          <th class="modified hidden-sm hidden-xs">Modifed</th>
          <th class="ttl hidden-sm hidden-xs">TTL</th>
          <th class="expiration hidden-sm hidden-xs">Expiration</th>
        </tr>
      </thead>
      <tbody>
        <tr class="active" wicket:id="currentNode">
          <td><span class="fa fa-fw node-icon"></span></td>
          <td>.</td>
          <td></td>
          <td class="hidden-sm hidden-xs"><span wicket:id="createdIndex"></span></td>
          <td class="hidden-sm hidden-xs"><span wicket:id="modifiedIndex"></span></td>
          <td class="hidden-sm hidden-xs"><span wicket:id="ttl"></span></td>
          <td class="hidden-sm hidden-xs"><span wicket:id="expiration"></span></td>
        </tr>
        <tr>
          <td><span class="fa fa-level-up fa-fw"></span></td>
          <td class="table-cell-link"><a href="#" wicket:id="goUp">..</a></td>
          <td></td>
          <td class="hidden-sm hidden-xs"></td>
          <td class="hidden-sm hidden-xs"></td>
          <td class="hidden-sm hidden-xs"></td>
          <td class="hidden-sm hidden-xs"></td>
        </tr>
        <tr wicket:id="nodes">
          <td><span class="fa fa-fw node-icon"></span></td>
          <td class="table-cell-link"><a href="#" wicket:id="key"><span wicket:id="label"></span></a></td>
          <td><div class="popover-value"><span wicket:id="value" class="value-wrapper"></span></div></td>
          <td class="hidden-sm hidden-xs"><span wicket:id="createdIndex"></span></td>
          <td class="hidden-sm hidden-xs"><span wicket:id="modifiedIndex"></span></td>
          <td class="hidden-sm hidden-xs"><span wicket:id="ttl"></span></td>
          <td class="hidden-sm hidden-xs"><span wicket:id="expiration"></span></td>
        </tr>
      </tbody>
    </table>
  </wicket:enclosure>

</div><!-- end of panel -->

<wicket:enclosure child="editValue">
  <a href="#" wicket:id="editValue" class="edit-value">
    <div class="well clearfix">
      <span class="pull-left" wicket:id="value"></span>
      <span class="pull-right"><span class="fa fa-pencil text-muted"></span></span>
    </div>
  </a>
</wicket:enclosure>

</div><!-- ./contents -->

<!-- TODO: Popover to show the complete value
<script>
$(document).ready(function() {
    $(".popover-value").popover({
        html: true,
        trigger: 'hover',
        placement: 'bottom',
        title: function() { return $(this).parent('td').prev('td').text(); },
        content: function() { return $(this).find('.value-wrapper').html(); }
    });
});
</script>-->

<div wicket:id="editNodeModal"></div>
<div wicket:id="deleteNodeModal"></div>


</wicket:panel>

</body>
</html>